import React, { createRef } from 'react';
import './app.css'

// 生成独一无二的id
import { v4 as uuid } from 'uuid'

// 受控组件
class InputComponent extends React.Component {
  state = {
    msg: "UnderControl"
  }

  handleChange = (e) => {
    // 拿到值后回写给state
    this.setState({
      msg: e.target.value
    })
  }

  render() {
    return (
      // 监听事件 拿到数据 手动实现双向绑定
      <input type="text" value={this.state.msg} onChange={this.handleChange} />
    )
  }
}

// 非受控组件
class InputComponentWithoutControl extends React.Component {
  // 存储dom的容器
  msgRef = createRef()

  handleChange = () => {
    // 获取到对应的dom元素 this.msgRef.current
    console.log(this.msgRef)
  }

  render() {
    return (
      <input type="text" ref={this.msgRef} onChange={this.handleChange} />
    )
  }
}

const list = [
  // uuid()生成独一无二的id
  {
    id: uuid(),
    name: "小明"
  },
  {
    id: uuid(),
    name: "小红"
  },
  {
    id: uuid(),
    name: "大白"
  }
]

function App() {
  return (
    <div className="App">
      <InputComponent></InputComponent>
      <InputComponentWithoutControl></InputComponentWithoutControl>
      <div>
        {list.map(v => {
          return <p key={v.id}>name:{v.name}{v.id}</p>
        })}
      </div>
    </div>
  );
}

export default App;
